﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Register.aspx.cs" Inherits="Register" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="Script/validator-master/fv.css" rel="stylesheet" type="text/css" />
    <link href="Script/zebraDialog/css/zebra_dialog.css" rel="stylesheet" />
    <link href="Script/css/cupertino/jquery-ui.min.css" rel="stylesheet" />
    <link href="Script/css/cupertino/jquery.ui.theme.css" rel="stylesheet" />

    <script src="Script/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="Script/zebraDialog/javascript/zebra_dialog.js"></script>
    <script src="Script/validator-master/multifield.js"></script>
    <script src="Script/validator-master/validator.js"></script>
    <div id='wrap'>

        <h1 title='how forms should be done.'>Form đăng ký thành viên</h1>
        <section class='form'>
            <%--<form action="#" method="post" novalidate>--%>
            <fieldset>
                <div class="item">
                    <label>
                        <span>Tên</span>
                        <input id="ipTen" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. Leo Pham" required="required" type="text" />
                    </label>
                    <div class='tooltip help'>
                        <span>?</span>
                        <div class='content'>
                            <b></b>
                            <p>Tên phải bao gồm 2 từ.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <label>
                        <span>Nickname</span>
                        <input id="ipNick" class='optional' name="occupation" data-validate-length-range="5,20" type="text" />
                    </label>

                    <span class='extra'>(optional)</span>
                </div>
                <div class="item">
                    <label>
                        <span>Giới tính</span>
                        <select id="opSex" class="required" name="dropdown">
                            <option value="-1">-- none --</option>
                            <option value="0">Nam</option>
                            <option value="1">Nữ</option>
                        </select>
                    </label>
                    <div class='tooltip help'>
                        <span>?</span>
                        <div class='content'>
                            <b></b>
                            <p>Chọn giới tính?</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <label>
                        <span>Email</span>
                        <input id="ipEmail" name="email" class='email' required="required" type="email" />
                    </label>
                </div>
                <div class="item">
                    <label>
                        <span>Nhập lại Email</span>
                        <input type="email" class='email' name="confirm_email" data-validate-linked='email' required='required'>
                    </label>
                </div>

                <div class="item">
                    <label>
                        <span>Ngày sinh</span>
                        <input id="ipDate" class='date' type="date" name="date" required='required'>
                    </label>
                </div>
                <div class="item">
                    <label>
                        <span>Password</span>
                        <input id="ipPass" type="password" name="password" data-validate-length="6,8" required='required'>
                    </label>
                    <div class='tooltip help'>
                        <span>?</span>
                        <div class='content'>
                            <b></b>
                            <p>Password nên có độ dài từ 6 ký tự trở lên.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <label>
                        <span>Nhập lại password</span>
                        <input id="ipPass" type="password" name="password2" data-validate-linked='password' required='required'>
                    </label>
                </div>
                <div class="item">
                    <label>
                        <span>Website/Blog</span>
                        <input id="ipUrl" name="url" placeholder="http://www.website.com" class='optional' type="url" />
                    </label>
                    <span class='extra'>(optional)</span>
                </div>


            </fieldset>
            <fieldset>
                <input id="ckSubmit" type="checkbox" />Tôi đã đọc và đồng ý với các điều khoản.
                    <input name="somethingHidden" required="required" type="text" style='display: none' />
            </fieldset>
            <button id='send' type="button">Submit</button>
            <%--</form>--%>
        </section>
    </div>
    <script>
        $(document).ready(function () {
            $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

            $('#ipDate').datepicker({
                dateFormat: "dd/mm/yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "1960:+0"
            });

        });



        $('#ipEmail').blur(function () {
            Ajax_CheckEmail($(this).val());
        });

        $('#ipEmail').change(function () {
            Ajax_CheckEmail($(this).val());
        });

        function Ajax_CheckEmail(email) {
            var param = "{Email:'" + email + "'}";

            $.ajax({
                type: "POST",
                url: "Process/AjaxPage.aspx/Ajax_CheckEmail",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (returnMsg) {
                    if (returnMsg.d == false) {
                        mark($('#ipEmail'), 'Email đã tồn tại');
                    };

                    //Process_spDangKyWeb_SelectDSLopByMonHocIDAndDSLopDK(returnMsg.d, MonHocID);
                },
                error: function () {
                    $.Zebra_Dialog('Có lỗi.');
                }
            });
        }


        mark = function (field, text) {
            if (!text || !field || !field.length)
                return false;
            var defaults = { alerts: true };
            // check if not already marked as a 'bad' record and add the 'alert' object.
            // if already is marked as 'bad', then make sure the text is set again because i might change depending on validation
            var item = field.parents('.item'), warning;

            item.find('.alert').remove();

            if (defaults.alerts) {
                warning = $('<div>').addClass('alert').text(text);
                item.append(warning);
            }

            item.removeClass('bad');
            setTimeout(function () {
                item.addClass('bad');
            }, 0);
        };


        


        // validate a field on "blur" event, a 'select' on 'change' event & a '.required' classed multifield on 'keyup':
        $('.form')
			.on('blur', 'input[required], input.optional, select.required', validator.checkField)
			.on('change', 'select.required, input[required]', validator.checkField);

        $('.multi.required')
			.on('keyup', 'input', function () {
			    validator.checkField.apply($(this).siblings().last()[0]);
			}).on('blur', 'input', function () {
			    validator.checkField.apply($(this).siblings().last()[0]);
			});

        // bind the validation to the form submit event
        //$('#send').click('submit');//.prop('disabled', true);

        //$('form').submit(function (e) {
        //    e.preventDefault();
        //    var submit = true;
        //    // evaluate the form using generic validaing
        //    if (!validator.checkAll($(this))) {
        //        submit = false;
        //    }

        //    if (submit)
        //        alert('thanh cong');
        //        //this.submit();
        //    return false;
        //});

        $('#send').click(function (e) {
            if (!$('#ckSubmit').is(':checked')) {
                $.Zebra_Dialog('Bạn chưa đồng ý các điều khoản quy định.', {
                    'type': 'warning',
                    'title': 'Thông báo',
                });
                return;
            }
            if (!validator.checkAll($('.form'))) {
                $.Zebra_Dialog('Bạn chưa nhập đầy đủ thông tin, vui lòng nhập lại', {
                    'type': 'warning',
                    'title': 'Thông báo',
                    'buttons': ['OK'],
                    'onClose': function (caption) {
                        //alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
                    }
                });
            }
            else {
                Ajax_Register();
            }
        });


        function Ajax_Register() {

            var param = "{Fullname:'" + $('#ipTen').val()
                + "',Nickname:'" + $('#ipNick').val()
                + "',Sex:'" + $('#opSex').val()
                + "',Email:'" + $('#ipEmail').val()
                + "',Birthday:'" + $('#ipDate').val()
                + "',Url:'" + $('#ipUrl').val()
                + "',Password:'" + $('#ipPass').val() + "'}";

            $.ajax({
                type: "POST",
                url: "Process/AjaxPage.aspx/Ajax_Register",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (returnMsg) {
                    $.Zebra_Dialog('Đăng ký thành công.');
                    //Process_spDangKyWeb_SelectDSLopByMonHocIDAndDSLopDK(returnMsg.d, MonHocID);
                },
                error: function () {
                    $.Zebra_Dialog('Có lỗi.');
                }
            });
        }

    </script>
</asp:Content>

